<template>
  <div id="index">
    <div class="slideshow">
      <div class="left-menu fl">
        <ul class="list-box">
          <li class="title" v-for="(value,key) in menus" :key="key">
            <!-- <a href>{{value.name1}}</a> -->
            <router-link tag="a" target="_blank" :to="{name:'List',query:{keyword:value.name1}}">{{value.name1}}</router-link>
            <span>/</span>
            <!-- <a href>{{value.name2}}</a> -->
            <router-link tag="a" target="_blank" :to="{name:'List',query:{keyword:value.name1}}">{{value.name2}}</router-link>
            <div class="pop">
              <div class="main-menu">
                <p class="fl">{{value.name1}}</p>
                <ul class="menu-list">
                  <li class="tag fl" v-for="value in value.item1" :key="value.id" @click="()=>{$router.push({name:'List',query:{keyword:value.title}})}">
                    <img class="fl" :src="value.picture" alt />
                    <span class="fl">{{value.title}}</span>
                  </li>
                </ul>
              </div>
              <div class="main-menu">
                <p class="fl">{{value.name2}}</p>
                <ul class="menu-list">
                  <li class="tag fl" v-for="value in value.item1" :key="value.id" @click="()=>{$router.push({name:'List',query:{keyword:value.title}})}" >
                    <img class="fl" :src="value.picture" alt />
                    <span class="fl">{{value.title}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="slider fl">
        <el-carousel :interval="5000" arrow="always" height="358px">
          <el-carousel-item v-for="item in picture" :key="item.id">
            <img :src="item.name" alt />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      menus: [
        { name1: "e购有品", 
          item1:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
          name2: "家用电器",
          item2:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
        },
        { name1: "智能家电", 
          item1:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
          name2: "电视影音",
          item2:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
        },
        { name1: "家居家装", 
          item1:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
          name2: "居家餐厨",
          item2:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
        },
        { name1: "运动户外", 
          item1:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
          name2: "出行车品",
          item2:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
        },
        { name1: "手机电脑", 
          item1:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
          name2: "数码配件",
          item2:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
        },
        { name1: "服装配饰", 
          item1:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
          name2: "鞋靴箱包",
          item2:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
        },
        { name1: "日用文创", 
          item1:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
          name2: "饮用酒水",
          item2:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
        },
         { name1: "洗护美妆", 
          item1:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
          name2: "医疗健康",
          item2:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
        },
        { name1: "母婴亲子", 
          item1:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
          name2: "宠物生活",
          item2:[{
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                },
                {
                  picture: require("../../../../assets/img/pic2.png"),
                  title: "销量榜单"
                }],
        }
      ],
      items: [
       
        {
          picture: require("../../../../assets/img/pic2.png"),
          title: "销量榜单"
        },
        {
          picture: require("../../../../assets/img/pic2.png"),
          title: "销量榜单"
        },
        {
          picture: require("../../../../assets/img/pic2.png"),
          title: "销量榜单"
        }
      ],
      picture: [
        { name: require("../../../../assets/img/1.jpg") },
        { name: require("../../../../assets/img/2.jpg") },
        { name: require("../../../../assets/img/3.jpg") },
        { name: require("../../../../assets/img/4.jpg") }
      ]
    };
  }
};
</script>

<style scoped>
a {
  display: inline;
}
#index {
  width: 1080px;
  height: 358px;
  margin: 0 auto;
  margin-top: 2%;
  display: block;
}

.slideshow {
  width: 100%;
  height: 358px;
  /* background-color: darkgrey; */
}

/* 左侧导航栏 */
.slideshow .left-menu {
  width: 21%;
  height: 100%;
  background-color: #29a3d6;
}
.left-menu .list-box {
  height: 40px;
  width: 100%;
  position: relative;
}
.left-menu .list-box .title {
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
.left-menu .list-box .title a {
  color: #fff;
}
.left-menu .list-box .title a:hover {
  color: #33ccff;
}
.left-menu .list-box .title:hover {
  background-color: #0076a4;
  cursor: pointer;
}
/* 隐藏栏 */
.left-menu .list-box .title .pop {
  width: 855px;
  height: 358px;
  background-color: #fff;
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
  cursor: default;
  overflow: hidden;
  overflow: scroll;
  z-index: 1000;
}
.left-menu .list-box .title:hover .pop {
  display: inline;
  box-shadow: 2px 3px 5px #ccc;
  border-top: 1px solid #ccc;
}
.left-menu .list-box .title .pop .main-menu {
  /* height: 50%; */
  width: 90%;
  overflow: hidden;
  margin-top: 1%;
  margin-bottom: 2%;
  padding-left: 4%;
  /* background-color: blueviolet; */
}
.left-menu .list-box .title .pop .main-menu p {
  color: #000;
  display: block;
  width: 60px;
  margin-right: 100%;
}
.menu-list {
  color: #000;
  width: 100%;
  overflow: hidden;
  display: block;
  /* border: 1px solid black; */
}
.menu-list .tag {
  margin-bottom: 30px;
  width: 25%;
  height: 40px;
  line-height: 40px;
}
.tag {
  cursor: pointer;
}
.menu-list .tag img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  /* border: 1px solid saddlebrown; */
}
.menu-list .tag span {
  color: #666;
  line-height: 40px;
  /* border: 1px solid saddlebrown; */
}
.menu-list .tag span:hover {
  color: #29a3d6;
}
/* 轮播图 */
.slider {
  width: 79%;
  height: 100%;
  /* background-color:bisque; */
}
.el-carousel {
  height: 100%;
}
.el-carousel .el-carousel__container {
  height: 100%;
}
.el-carousel img {
  height: 100%;
  width: 100%;
}
</style>